$(document).ready(function() {
    $('.slider-main').flexslider({
        //namespace: 'flex-',
        //selector: '.slides > li',
        //animation: 'fade',
        //easing: 'swing', // no use
        direction: 'horizontal',
        reverse: false,
        animationLoop: true,
        smoothHeight: false,
        //startAt: 0,
        slideshow: true, // to sync, set to false
        slideshowSpeed: 2000,
        animationSpeed: 500,
        //initDelay: 3000, // while initDelay, click next/prev will raise bug...
        randomize: false, // to sync, set to false
        pauseOnAction: false,
        pauseOnHover: true,
        useCSS: true,
        touch: true, // after swipe, should touch 'space' to lose focus and continue the auto animation
        //video: false, // not necessary
        controlNav: true, // to sync, set to false
        directionNav: false,
        //prevText: 'prev', // not necessary
        //nextText: 'next', // not necessary
        keyboard: true,
        //multiKeyboard: false, // not necessary
        //mousewheel: false, // not necessary
        //pausePlay: true, // not necessary
        //pauseText: 'pause', // not necessary
        //playText: 'play', // not necessary
        //controlsContainer: '',
        manualControls: '.slider-sub li img',
        //sync: '.slider-sub',
        start: function() {
            $('.slider-sub li:first').addClass('slider-hover');
        },
        before: function(e) {
            $('.slider-hover').removeClass('slider-hover');
            var selector = '.slider-sub li:nth(' + e.animatingTo + ')';
            $(selector).addClass('slider-hover');
        }
    });
    
    var t;
    $('.slider-sub li').click(function() {
        clearTimeout(t);
        $slider = $('.slider-main');
        $slider.flexslider($(this).index());
        $slider.flexslider('pause');
        t = setTimeout('$(".slider-main").flexslider("play")', 800);
    });
    
    
    //var cwidth = $('.slider-container').width() - 10 /* margin */ - 16 /* border*2*2 */ - 5 /* preserved */;
    //    subwidth = Math.floor(cwidth / 5);
    //    subheight = Math.floor(subwidth / 4) * 3;
    //    mainwidth = subwidth * 4;
    //    mainheight = subwidth * 3;
    //$('.slider-main img').width(mainwidth).height(mainheight);
    //$('.slider-sub').width(subwidth).height(mainheight);
    //$('.slider-sub img').width(subwidth).height(subheight);
    //$('.slider-caption').width(mainwidth -40);
});